<template>

    <div class="container">

        <el-form label-width="160px">

            <el-form-item v-for="(item, index) in items" :key="item.id" :label="item.cfg_label">
                <el-input v-model="item.cfg_value" v-if="item.cfg_type==='text'"></el-input>
                <el-input v-model="item.cfg_value" v-if="item.cfg_type==='textarea'" type="textarea"></el-input>
                <image-upload v-if="item.cfg_type==='image'" @change="(files) => {uploadHandle(files, index)}"  :showFileList="false" :mutiple="false" ></image-upload>
                <span v-if="item.cfg_type==='image'"><img :src="item.cfg_value" width="100"> </span>
                <el-alert
                        v-if="item.cfg_notice != ''"
                        :title="item.cfg_notice"
                        type="success"
                        :closable="false">
                </el-alert>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="save">保存</el-button>
            </el-form-item>
        </el-form>

    </div>

</template>
<style scoped="scoped">

</style>
<script>
  export default {
    components: {
    },
    data() {
      return {
        items: configure
      }
    },
    created() {

    },
    methods: {
      save() {
        axios.put('/admin/configure', {data: this.items}).then((res) => {
          if (res.data.code === 0) {
            this.$message.success('保存成功！')
          } else {
            this.$message.error(res.data.msg);
          }
        }).catch(_ => {
          this.$message.error('系统错误');
        });
      },
      uploadHandle(files, index) {
        this.items[index].cfg_value = files.length > 0 ? files[0].file_url : '';
      }
    }
  }
</script>